<template>
	<div class="content">
		<div class="top">
			<h1>系统监控</h1>
		</div>
		<div class="main">
			<div class="left">
				<div class="card box">
					<div class="subtitle">系统信息</div>
					<div class="card-row">
						<span>操作系统</span>
						<span>{{card1data.system}}</span>
					</div>
					<div class="card-row">
						<span>物理核心</span>
						<span>{{card1data.coreCount}}</span>
					</div>
					<div class="card-row">
						<span>逻辑核心</span>
						<span>{{card1data.coreCount2}}</span>
					</div>
					<div class="card-row">
						<span>主频</span>
						<span>{{card1data.hz}}</span>
					</div>
					<div class="card-row">
						<span>GPU</span>
						<span>{{card1data.gpu}}</span>
					</div>
				</div>
				<div class="box card flex1 " style="margin-top: 14px; display: flex; flex-direction: column;">
					<div class="subtitle">内存占用</div>
					<!--Echarts组件-->
					<DiskRatioCharts style="width: 100%;" class="flex1" :data="memoryData"/>
				</div>
			</div>
			<div class="center box flex-item-center">
				<!--Echarts组件-->
				<CPUratioCharts :data="cpuData.scale" title="CPU占用率" class="flex1" style="height: 100%;"/>
				<CPUratioCharts :data="gpuLoad" title="GPU占用率" class="flex1" style="height: 100%;"/>
				<img class="lbx" src="./lbx.png"/>
			</div>
			<div class="right" >
				<div class="card box" style="max-width: 100%; height: 100%;">
					<!--列表组件-->
					<ProcessInfo/>
				</div>
			</div>
		</div>
		<div class="footer box">
			<!--Echarts组件-->
			<OnLineCountCharts style="width: 100%; height: 100%;" title="物理核心负载率(%)" :data="cpuData.footerData"/>
		</div>
	</div>
</template>
<script setup lang="ts">
import {ref, onMounted, onUnmounted} from 'vue'
import CPUratioCharts from "./component/CPUratioCharts.vue";
import DiskRatioCharts from "./component/DiskRatioCharts.vue";
import { cpuInfo, gpuInfo, memoryInfo, systemInfo} from '/@/api/systemInfo'
import ProcessInfo from './component/ProcessInfo.vue'
import OnLineCountCharts from "./component/OnLineCountCharts.vue";

//操作系统信息
const card1data = ref({
	system: '', //操作系统
	coreCount: 0,//物理核心数
	coreCount2: 0, //逻辑核心
	hz: '', //主频
	gpu: '' //显卡
})

const cpuData = ref({
	scale: 0, //cpu负载率 %
	coreCount: 0, //cpu物理核心数
	footerData: {
		xData: [],
		yData: []
	}
})
const getCpuInfo = async () => {
	const res = await cpuInfo()
	//所有核心一起计算cpu总体负载
	const sum = res.data.cpu_percent.reduce((accumulator, currentValue) => {
		return accumulator + currentValue;
	}, 0);
	const scale = (sum / (res.data.cpu_percent.length * 100) * 100).toFixed(2)
	const coreCount = res.data.cpu_percent.length
	let xData = []
	let yData = []
	res.data.cpu_percent.forEach((item, index) => {
		xData.push(`核心${index + 1}`)
		yData.push(item)
	})
	const footerData = {
		xData: [],
		yData: []
	}
	footerData.xData = xData
	footerData.yData = yData
	cpuData.value = {
		scale,
		coreCount,
		footerData
	}
	card1data.value.coreCount = res.data.cpu_percent.length
	card1data.value.coreCount2 = res.data.cpu_count_logical
	card1data.value.hz = (res.data.cpu_freq[0] / 1000).toFixed(1) + 'GHz'
}

//获取操作系统信息
const getSystemInfo = async ()=> {
	const res = await systemInfo()
	for(let name of ['BSD', 'LINUX', 'MACOS', 'POSIX', 'WINDOWS']){
		if(res.data[name]){
			card1data.value.system = name.toLowerCase()
		}
	}
}
//显卡负载
const gpuLoad = ref(0)
//获取gpu信息
const getGpuInfo = async ()=> {
	const res = await gpuInfo()
	if(res.data){
		const data = res.data[0];
		gpuLoad.value = (data.load * 100).toFixed(2)
		card1data.value.gpu = data.name
	}
}
//内存信息
const memoryData = ref(0)
const getMemoryInfo = async ()=> {
	const res = await memoryInfo()
	const total = res.data.virtual_memory[0]
	const scale = res.data.virtual_memory[1]
	memoryData.value = (scale / total * 100).toFixed(2)
}

//定时器
const cpuInnerval = ref(null)
const gpuInnerval = ref(null)
const memoryInnerval = ref(null)

const init = ()=> {
	getCpuInfo()
	getGpuInfo()
	getSystemInfo()
	getMemoryInfo()
	getSystemInfo()
	cpuInnerval.value = setInterval(() => {
		getCpuInfo()
	}, 1000 * 5)
	gpuInnerval.value = setInterval(() => {
		getGpuInfo()
	}, 1000 * 5)
	memoryInnerval.value = setInterval(()=> {
		getMemoryInfo()
	}, 1000 * 5)

}
onMounted(()=> {
	init()
})
//销毁定时器
onUnmounted(()=>{
	clearInterval(cpuInnerval.value)
	clearInterval(gpuInnerval.value)
	clearInterval(memoryInnerval.value)
})
</script>
<style scoped lang="scss">

.flex-item-center{
	display: flex;
	align-items: center;
}
.flex-column{
	display: flex;
	flex-direction: column;
}
.flex1{
	flex: 1;
}

.box{
	border: 1px solid rgba(7, 118, 181, .7);
	box-shadow: inset 0 0 5px rgba(7, 118, 181, .8);
}
.content{
	width: 100%;
	height: calc(100vh - 60px);
	background: #033c76;
	background-size: cover;
	display: flex;
	flex-direction: column;
	padding: 0 8px;
	.top{
		width: 100%;
		height: 90px;
		background: url('./topbg.png') 100% 100% no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		h1{
			line-height: 90px;
			font-size: 36px;
		}
	}
	.main{
		width: 100%;
		display: flex;
		padding: 8px 0;
		gap: 15px;              // 替代margin间距
		box-sizing: border-box; // 包含padding计算

		.left, .right{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.card{
				width: 100%;
				padding: 0 4px;
				.subtitle{
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 40px;
					border-bottom: 1px solid #407abd;
					font-size: 14px;
				}
				.card-row{
					color: #fefefe;
					padding: 0 8px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 35px;
					&:not(:last-child){
						border-bottom: 1px solid rgba(7, 118, 181, .7);
					}
				}
			}
		}
		.left, .right, .center{
			position: relative;
			height: 550px;
		}
		.center{
			margin: 0 !important;
			flex: 2;
			min-width: 0;
			background: url('./bg3.png') 100% 100% no-repeat;
			.lbx{
				position: absolute;
				width: 50%; // 可能超出容器边界
				/* 3D旋转动画配置 */
				animation: infinite-rotate 20s linear infinite;
				will-change: transform;      /* 优化动画性能 */
			}
		}

	}
	.footer{
		width: 100%;
		flex: 1;
		border: 1px solid rgba(7, 118, 181, .7);
		box-shadow: inset 0 0 5px rgba(7, 118, 181, .8);
		margin-bottom: 12px;
		position: relative;
	}
}

/* 3D旋转动画定义 */
@keyframes infinite-rotate {
	0% {
		transform: rotate( 0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


</style>